<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;  /* 使用border-box盒模型，元素的padding和border将包含在width和height内 */ 
        }
        
        /* 页面主体布局样式 */
        body{
            display: flex;
            justify-content: center;     /* 水平居中 */
            align-items: flex-start;     /* 垂直方向从顶部开始对齐 */
            height: 100vh;               /* 高度占满整个视口 */
            background: #353535;         /* 背景色 */
            padding-top: 100px;          /* 上内边距 */
            color: #333;                 /* 文字颜色 */
            font-size: 4em;              /* 字体大小 */
            font-family: 'Arial Rounded MT'; /* 字体 */
            text-align: center;          /* 文字居中对齐 */
        }
        
        /* 卡片容器样式 */
        .card-container{ 
            background: white;
            width: 100px;
            height: 100px;
            position: relative;
            
            /* 设置透视效果，值越小透视效果越明显 */
            perspective: 500px; 
        }
        
        /* 在卡片容器中间添加一条分隔线 */
        .card-container::before{
            content: '';
            position: absolute;
            left: 0;
            top:50%;
            height: 2px;
            /* 创建一个从黑色到白色的颜色渐变分隔线 */
            background: linear-gradient(to bottom,#000,#000 1px,#fff 1px);
            width: 100%;
            margin-top:-1px;  /* 微调位置使其精确居中 */
            z-index: 99;
        }
        
        /* 卡片基础样式 */
        .card{
            position:absolute;
            width: 100%;
            height: 50%;      /* 每张卡片占容器高度的一半 */
            left: 0;
            top: 0;
            overflow: hidden; /* 隐藏超出部分 */
        }
        
        /* 上半部分卡片样式 */
        .card1{ 
            background-color: #2da0d6;  /* 蓝色背景 */
            line-height: 100px;         /* 垂直居中文字 */
        }
        
        /* 下半部分翻转卡片样式 */
        .card2{
            top:50%;                    /* 定位到容器下半部分 */
            line-height: 0;             /* 文字垂直居中 */
            background-color: #7c4848;  /* 棕色背景 */
            transform: rotateX(180deg); /* 初始状态绕X轴旋转180度，即隐藏状态 */
            transform-origin: center top;  /* 设置变换原点为顶部中心 */
            backface-visibility: hidden;   /* 隐藏背面 */
            transition: transform 1s;      /* 变换持续时间1秒 */
            z-index: 10;
        }
        
        /* 鼠标悬停时，下半部分卡片翻转显示 */
        .card-container:hover .card2{
            transform: rotateX(0deg);   /* 绕X轴旋转0度，即正常显示 */
        }
        
        /* 上半部分翻转卡片样式 */
        .card3{ 
            line-height: 100px;         /* 文字垂直居中 */
            z-index: 10;
            background:yellow;          /* 黄色背景 */
            transform-origin: center bottom;  /* 设置变换原点为底部中心 */
            transition: transform 1s;         /* 变换持续时间1秒 */
            backface-visibility: hidden;      /* 隐藏背面 */
        }
        
        /* 鼠标悬停时，上半部分卡片翻转隐藏 */
        .card-container:hover .card3{
            transform: rotateX(-180deg);  /* 绕X轴旋转-180度，即翻转隐藏 */
        }
        
        /* 下半部分静态卡片 */
        .card4{
            top: 50%;                    /* 定位到容器下半部分 */
            line-height: 0px;            /* 文字垂直居中 */
            background: greenyellow;     /* 绿黄色背景 */
        }

    </style>
</head>
<body>
        <!-- 卡片翻转效果容器 -->
        <div class="card-container">
            <!-- 静态上半部分卡片 -->
            <div class="card1 card">2</div>
            <!-- 可翻转的下半部分卡片 -->
            <div class="card2 card">2</div>
            <!-- 可翻转的上半部分卡片 -->
            <div class="card3 card">3</div>
            <!-- 静态下半部分卡片 -->
            <div class="card4 card">3</div>
        </div>
</body>
</html>